<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>用户认证</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/wechat/ver2.css">
    <script type="text/javascript" src="__JS__/jquery.js"></script>
    <script type="text/javascript" src="__JS__/vue.js"></script>
    <script type="text/javascript" src="__JS__/manage/user/identity.js"></script>
</head>
<body>
    <div id="main">
        <div id="noOne" class="listBox" v-show="!addIdenShow">
            <ul>
                <li>
                    <span class="itemName">身份</span>
                    <div class="sele">
                        <span v-for="(v,index) in haveIden.utype">{{v.identity}} </span>
                    </div>
                </li>
                <li v-for="(v,index) in must" v-if="haveIden[v.name]">
                    <span class="itemName">{{v.lName}}</span>
                    <div class="sele">
                        <span v-if="!isImg(haveIden[v.name])">{{haveIden[v.name]}}</span>
                        <img v-if="isImg(haveIden[v.name])" :src="'__UPLOADS__'+haveIden[v.name]" @click="imgShow(haveIden[v.name])">
                    </div>
                </li>
            </ul>
            <ul>
                <li v-for="(v,index) in optional" v-if="haveIden[v.name]">
                    <span class="itemName">{{v.lName}}</span>
                    <div class="sele">
                        <span v-if="!isImg(haveIden[v.name])">{{haveIden[v.name]}}</span>
                        <img v-if="isImg(haveIden[v.name])" :src="'__UPLOADS__'+haveIden[v.name]" @click="imgShow(haveIden[v.name])">
                    </div>
                </li>
            </ul>
            <div class="subBox">
                <button type="button" @click="addIdenShow=true">添加新身份</button>
            </div>
        </div>
        <transition name="idenMove">
            <div id="addIden" class="listBox" v-if="addIdenShow">
                <form id="form1" action="{{:url('Cons/autype')}}" method="post" enctype="multipart/form-data">
                    <div class="title" v-if="!isOne">
                        <span class="iconBox"><i class="close" @click="addIdenShow=false"></i></span>
                        <div class="title">
                            <span>添加身份</span>
                        </div>
                        <input name="type" v-model="sendIdenIdarr.join(',')" style="display: none;">
                    </div>
                    <div class="content">
                       <ul>
                            <li @click="sfBoxShow">
                                <span class="itemName">身份类型</span>
                                <div class="sele" dtype="type">
                                    <b v-if="sendIdenNameArr.length == 0">请选择</b>
                                    <b v-if="sendIdenNameArr.length != 0">{{sendIdenNameArr.join(",")}}</b>
                                    <span class="iconBox">
                                        <i></i>
                                    </span>
                                    <input v-show="false" name="type" autocomplete="off" :value="sendIdenIdarr.join(',')">
                                </div>
                            </li>
                            <li v-for="(v,index) in readList">
                                <span class="itemName">{{v.lName}}</span>
                                <input type="text" :name="v.name" v-if="v.type=='text'">

                                <label class="sele" :dtype="v.name" v-else-if="v.type=='file'">
                                    <b>请选择</b>
                                    <span class="iconBox"><i></i></span>
                                    <input type="file" :name="v.name" @change="fileChange">
                                </label>

                                <label class="sele" :dtype="v.name" v-else-if="v.type=='sex'">
                                    <!-- <b>请选择</b> -->
                                    <!-- <span class="iconBox"><i></i></span> -->
                                    <select name="sex">
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </label>

                                <span class="sele" dtype="place" v-else-if="v.type=='place'" @click="choicePlace">
                                    <b v-if="placeBox.length==0">请选择</b>
                                    <b v-if="placeBox.length!=0">{{placeBox.join(" ")}}</b>
                                    <span class="iconBox"><i></i></span>
                                    <input name="pid" autocomplete="off" :value="placeIdBox[0]">
                                    <input name="cid" autocomplete="off" :value="placeIdBox[1]">
                                    <input name="aid" autocomplete="off" :value="placeIdBox[2]">
                                </span>
                            </li>
                        </ul>
                        <div class="subBox" v-if="idenNameArr.length != 0">
                            <button type="button" @click="submit">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </transition>
        <transition>
            <div id="choiceIden" v-if="choiceIdenShow">
                <div class="title">
                    <span class="iconBox"><i class="close" @click="choiceHide"></i></span>
                    <div class="title">
                        <span>选择身份</span>
                    </div>
                </div>
                <div class="content">
                    <div class="lookIden">
                        <ul>
                            <li v-for="(v,idnex) in idenNameArr">{{v}}</li>
                        </ul>
                    </div>
                    <div class="idenCla">
                        <div class="box">
                            <div class="leftNav">
                                <ul>
                                    <li v-for="(v,i) in idenAll" :class="lItem==i?'active':''">
                                        <span @click="sfShow(i)">{{v.type}}</span>
                                        <div class="rightBox" v-if="i==lItem">
                                            <div class="topNav">
                                                <ul>
                                                    <li v-for="(v1,i1) in v.depa" :class="tItem==i1?'active':''">
                                                        <span @click="tItem=i1">{{v1.type}}</span>
                                                        <div class="sfBox" v-if="i1==tItem">
                                                            <ul>
                                                                <li :class="actF(v2.id)" v-for="(v2,i2) in v1.people" :id="v2.id" @click="addIdenId(v2.id,v2.name)">{{v2.name}}</li>
                                                            </ul>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                    </div>
                    <div class="btnBox" @click="btnChoiceHide">确定</div>
                </div>
            </div>
        </transition>

        <transition>
            <div id="sexPlace" v-if="placeShow">
                <div class="modal">
                    <div class="title">
                        <span class="iconBox"><i class="close" @click="placeShow=false"></i></span>
                        <div class="title">
                            <span>选择地区</span>
                        </div>
                    </div>
                    <div class="sexMain">
                        <div class="text">
                            <span v-for="(v,index) in placeBox" @click="rePlace(index)">{{v}} </span>
                        </div>
                        <div class="content">
                            <ul>
                                <li v-for="(v,index) in ajaxBox" @click="ajaxPlace(v.id,v.name)" :did="v.id">{{v.name}}</li>
                            </ul>
                        </div>
                        <div class="alert" v-if="alertShow">
                            <p>
                                <span>加载中，请稍后...</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </transition>  
        <transition>
            <div id="subAlert" v-show="subShow">
                <span></span>
            </div>
        </transition>
        <div id="imgBox" v-if="imgIsShow" @click="imgIsShow=false">
            <img :src="imgUrl">
        </div>
    </div>
</body>
<script type="text/javascript">
    var haveIden = {{$data}};
    // haveIden = null;
    var vm = new Vue({
        el:"#main",
        data:{
            haveIden:{},
            must:[],
            optional:[],
            onlyNoName:[],
            idenAll:[],
            readList:[],
            isOne:false,
            addIdenShow:false,
            choiceIdenShow:false,
            placeShow:false,
            lItem:0,
            tItem:0,
            idenIdArr:[],
            idenNameArr:[],
            sendIdenIdarr:[],
            sendIdenNameArr:[],
            haveId:[],
            placeBox:[],
            placeIdBox:[],
            ajaxBox:[],
            alertShow:false,
            subShow:false,
            imgUrl:'',
            imgIsShow:false
        },
        methods:{
            imgShow:function(url){
                var url = '__UPLOADS__'+url;
                this.imgIsShow = true;
                this.imgUrl = url;
            },
            isImg:function(str){
                if(str){
                   if(str.indexOf(".") != "-1"){
                        var arr = str.split(".");
                        var str = arr[arr.length-1];
                        if(str == "jpg" || str == "png" || str == "jpeg"){
                            return true;
                        }
                    }
                    return false; 
                }
            },
            sfShow:function(i){
                this.lItem = i;
                this.tItem = 0;
            },
            sfBoxShow:function(){
                this.choiceIdenShow = true;
                this.readList = [];
            },
            addIdenId:function(did,name){
                for(var i = 0; i < this.haveId.length; i++){
                    if(this.haveId[i] == did){
                        return;
                    }
                }
                var _this = this;
                for(var i = 0; i < this.idenIdArr.length; i++){
                    if(this.idenIdArr[i] == did){
                        this.idenIdArr.splice(i,1);
                        this.idenNameArr.splice(i,1);
                        return;
                    }
                }
                // 单对单身份单选
                function one(arr){ // arr为不能同时选择的身份ID
                    arr.forEach(function(v,i){
                        if(did == v){
                            _this.idenIdArr.forEach(function(v1,j){
                                arr.forEach(function(v2,x){
                                    if(v != v2){
                                        if(v1 == v2){
                                            _this.idenIdArr.splice(j,1);
                                            _this.idenNameArr.splice(j,1);
                                        }
                                    }
                                })
                            })
                        }
                    })
                }
                function more(arr,id){
                    if(did != id){
                        arr.forEach(function(v,i){
                            if(did == v){
                                _this.idenIdArr.forEach(function(v1,j){
                                    if(v1 == id){
                                        _this.idenIdArr.splice(j,1);
                                        _this.idenNameArr.splice(j,1);
                                    }
                                })
                            }
                        });
                    }else{
                        arr.forEach(function(v,i){
                            _this.idenIdArr.forEach(function(v1,j){
                                if(v1 == v){
                                    _this.idenIdArr.splice(j,1);
                                    _this.idenNameArr.splice(j,1);
                                }
                            })
                        });
                    }
                }
                one([46,47,48]);
                one([50,51]);
                one([57,58,59]);
                more([35,37,39],52);
                this.idenIdArr.push(did);
                this.idenNameArr.push(name);
            },
            option:function(arr){
                var off = true;
                for(var i = 0; i < this.optional.length; i++){
                    off = true;
                    for(var j = 0; j < arr.length; j++){
                        if(off){
                            for(var x = 0; x < this.optional[i].into.length; x++){
                                if( arr[j] == this.optional[i].into[x]){
                                    this.readList.push(this.optional[i]);
                                    off = false;
                                    break;
                                }
                            }
                        }else{
                            break;
                        }
                    }
                }
                for(var i = this.readList.length-1; i > 0 ; i--){
                    for(var j = i-1; j >= 0 ; j--){
                        if(this.readList[i] == this.readList[j]){
                            this.readList.splice(i,1);
                        }
                    }
                }
            },
            delCommon:function(){
                 for(var i =0; i < this.readList.length; i++){
                    for(var key in this.haveIden){
                        if( this.readList[i].name == key){
                            this.readList.splice(i,1);
                            break;
                        }
                    }
                 } 
            },
            whatRead:function(arr){
                if(arr.length == 0){
                    this.readList = [];
                    return;
                }
                if(haveIden.utype.length != 0){
                    if(haveIden.utype.length == 1 && haveIden.utype[0].id == 51){
                        for(var i = 0; i < this.must.length; i++){
                            if(this.must[i].name != "name"){
                                this.readList.push(this.must[i]);
                            }
                        }
                        this.option(arr);
                        this.delCommon();
                    }else{
                        this.option(arr);
                        this.delCommon();
                    }
                }else{
                    if(arr.length == 1 && arr[0] == 51){
                        for(var i = 0; i < this.onlyNoName.length; i++){
                            this.readList.push(this.onlyNoName[i]);
                        }
                    }else{
                        for(var i = 0; i < this.must.length; i++){
                            this.readList.push(this.must[i]);
                        }
                        this.option(arr);
                    }
                }
            },
            actF:function(id){
                for(var i = 0; i < this.haveId.length; i++){
                    if(this.haveId[i] == id){
                        return 'disabled';
                    }
                }
                for(var i = 0; i < this.idenIdArr.length; i++){
                    if(this.idenIdArr[i] == id){
                        return 'active';
                    }
                }
                return '';
            },
            choiceHide:function(){
                    this.idenIdArr = [];
                    this.idenNameArr = [];
                for(var i = 0; i < this.sendIdenIdarr.length; i++){
                    this.idenIdArr.push(this.sendIdenIdarr[i])
                    this.idenNameArr.push(this.sendIdenNameArr[i])
                }
                this.choiceIdenShow = false;
                this.whatRead(this.sendIdenIdarr);
            },
            btnChoiceHide:function(){
                this.sendIdenIdarr = [];
                this.sendIdenNameArr = [];
                this.choiceIdenShow = false;
                for(var i = 0; i < this.idenIdArr.length; i++){
                    this.sendIdenIdarr.push(this.idenIdArr[i])
                    this.sendIdenNameArr.push(this.idenNameArr[i])
                }
                this.whatRead(this.sendIdenIdarr);
            },
            rePlace:function(index){
                this.placeBox.splice(index,this.placeBox.length-index);
                this.placeIdBox.splice(index,this.placeIdBox.length-index);
                if(index == 0){
                    this.ajaxPlace(1);
                }else{
                   this.ajaxPlace(this.placeIdBox[index-1]);
               }
            },
            choicePlace:function(){
                this.placeShow = true;
            },
            ajaxPlace:function(did,name){
                if(name){
                    this.placeBox.push(name);
                    this.placeIdBox.push(did);
                }
                this.alertShow = true;
                $.post("/manage/user/areas",{pid:did},function(data){
                    if( data.status == 1){
                        this.ajaxBox = data.data;
                        if(data.data.length == 0){
                            this.placeShow = false;
                            this.alertShow = false;
                            this.ajaxBox = [];
                            return;
                        }
                        this.alertShow = false;
                    }
                }.bind(this),"json")
            },
            fileChange:function(e){
                var name = e.target.files[0].name;
                if(name == ""){
                    name = "请选择"
                }
                $(e.target).parents("label").find("b").html(name);
            },
            submit:function(){
                for(var i = 0; i < $('input').length; i++){
                    if($('input').eq(i).val() == ""){
                        this.subShow = true;
                        var name = $('input').eq(i).parents('li').find('.itemName').html();
                        $('#subAlert span').html(name+"不能为空");
                        setTimeout(function(){
                            this.subShow = false;
                        }.bind(this),2000);
                        return;
                    }
                }

                $("#form1").submit();
            }
        },
        created:function(){
            if(haveIden.utype.length != 0){
                this.haveIden = haveIden;
                for(var key in this.haveIden.note){
                    this.haveIden[key] = this.haveIden.note[key];
                }
                if(this.haveIden.sex == 1){
                    this.haveIden.sex = "男"
                }else if(this.haveIden.sex == 2){
                    this.haveIden.sex = "女"
                }

                for(var i = 0; i < this.haveIden.utype.length; i++){
                    this.haveId.push(this.haveIden.utype[i].id);
                }
                this.isOne = false;
            }else{
                this.isOne = true;
                this.addIdenShow = true;
            }
            
            this.must = allIden.must;
            this.optional = allIden.optional;
            this.onlyNoName = allIden.onlyNoName;
            this.idenAll = allIden.idenAll;
            this.ajaxPlace(1);
        }
    })
</script>
</html>